<template>
  <div class="body">
    <!-- <el-button type="info" icon="el-icon-refresh-right"></el-button> -->
    <!-- <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加</el-button> -->
    <!-- <el-button type="primary" icon="el-icon-edit" @click="handleUpdate">编辑</el-button> -->
    <!-- <el-button type="danger" icon="el-icon-delete">删除</el-button>
    <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
    <el-row class="mb8">
      <el-col :span="19">
        <el-button
          type="info"
          @click="shuaxin"
          icon="el-icon-refresh-right"
        ></el-button>
        <!-- <el-button type="success" @click="handleAdd" icon="el-icon-plus">上传</el-button> -->
      </el-col>
      <el-col :span="5" class="seach">
        <el-input
          v-model="params.keywords"
          placeholder="请输入关键字"
        ></el-input>
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="shuaxin"
        ></el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleTable"
      :data="bidlist"
      tooltip-effect="dark"
      class="table xinde"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="proid" label="序号" width="50"></el-table-column>
      <el-table-column
        prop="biddingNumber"
        align="center"
        label="项目编号"
        :show-overflow-tooltip="true"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectNumber"
        align="center"
        label="包号"
        :show-overflow-tooltip="true"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="biddingProjectName"
        align="center"
        label="采购项目名称"
        :show-overflow-tooltip="true"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="biddingType"
        align="center"
        label="采购方式"
        width="80"
      ></el-table-column>
      <el-table-column
        prop="bidderNoticeTime"
        align="center"
        label="招标公告发布日期"
        :show-overflow-tooltip="true"
        width="220"
      >
        <template slot-scope="scope">{{
          scope.row.bidderNoticeTime | dateFormat
        }}</template>
      </el-table-column>
      <el-table-column
        prop="reviewTime"
        align="center"
        label="评审日期"
        :show-overflow-tooltip="true"
        width="220"
      >
        <template slot-scope="scope">{{
          scope.row.reviewTime | dateFormat
        }}</template>
      </el-table-column>
      <!-- <el-table-column prop="content" align="center" label="采购需求内容" width="130"></el-table-column> -->
      <el-table-column
        prop="marginAmount"
        align="center"
        label="预算金额"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="unifyCode"
        align="center"
        label="公司统一社会信用代码"
        :show-overflow-tooltip="true"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="companyName"
        align="center"
        label="公司名"
        :show-overflow-tooltip="true"
        width="220"
      ></el-table-column>
      <el-table-column
        prop="source"
        align="center"
        label="信息来源"
        width="130"
      ></el-table-column>
      <el-table-column align="center" label="资金来源" width="130">
        <template slot-scope="scope">{{
          scope.row.moneysource == 0
            ? "政府资金"
            : scope.row.moneysource == 1
            ? "自筹资金"
            : "其他自己资金"
        }}</template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作">
        <template slot-scope="scope">
          <el-button @click="details(scope.row)" type="text" size="small"
            >查看详情</el-button
          >
          <!-- <el-button  @click="details(scope.row)" type="text" size="small">申请</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="序号">
          <el-input v-model="id"></el-input>
        </el-form-item>
        <el-form-item label="采购项目编号">
          <el-input v-model="form.project_id"></el-input>
        </el-form-item>
        <el-form-item label="采购项目名称">
          <el-input v-model="form.project_name"></el-input>
        </el-form-item>
        <el-form-item label="采购方式">
          <el-input v-model="form.procurement_method"></el-input>
        </el-form-item>
        <el-form-item label="招标公告发布日期">
          <el-input v-model="form.notice_release_time"></el-input>
        </el-form-item>
        <el-form-item label="评审日期">
          <el-input v-model="form.review_time"></el-input>
        </el-form-item>
        <el-form-item label="中标包号">
          <el-input v-model="form.package_number"></el-input>
        </el-form-item>
        <el-form-item label="中标供应商名称">
          <el-input v-model="form.supplier_name"></el-input>
        </el-form-item>
        <el-form-item label="已申请保函">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="未申请保函">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="中标金额">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="当前中标包号中的名称">
          <el-input v-model="form.package_number_name"></el-input>
        </el-form-item>
        <el-form-item label="代理服务收费金额">
          <el-input v-model="form.agent_money"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog> -->
    <el-dialog :title="title" :visible.sync="open1" width="60%" append-to-body>
      <el-form
        ref="form"
        :disabled="true"
        :model="form"
        :rules="rules"
        label-width="130px"
      >
        <el-row :gutter="10">
          <el-col :span="8">
            <el-form-item label="项目编号:">
              <el-input
                v-model="formData.bidding_number"
                placeholder="请输入项目编号:"
                show-word-limit
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购项目名称：">
              <el-input
                v-model="formData.bidding_project_name"
                placeholder="请输入采购项目名称："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="采购方式：">
              <el-input
                v-model="formData.bidding_type"
                placeholder="请输入采购方式："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="预算金额：">
              <el-input
                v-model="formData.margin_amount"
                placeholder="请输入预算金额："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label-width="130px" label="包号：">
              <el-input
                v-model="formData.bidding_project_number"
                placeholder="请输入包号："
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="统一信用代码：">
              <el-input
                v-model="formData.unify_code"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label-width="130px" label="公司名称：">
              <el-input
                v-model="formData.company_name"
                placeholder="暂无数据"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bottom">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label">采购需求</span>
            {{ formData.content }}
          </el-tab-pane>
          <!-- <el-tab-pane label="申请人资格需求">{{formData.qualification}}</el-tab-pane> -->
          <el-tab-pane label="时间地点">
            <p>添加时间：{{ formData.create_time | dateFormat }}</p>
          </el-tab-pane>
          <!-- <el-tab-pane label="采购人资料">
              <el-row :gutter="15">
                <el-form
                  :disabled="true"
                  ref="elForm"
                  :model="formData"
                  :rules="rules"
                  size="medium"
                  label-width="100px"
                >
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人名称：" prop="purchase_person_name">
                      <el-input
                        v-model="formData.purchase_person_name"
                        placeholder="请输入采购人名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购人地址:" prop="purchase_person_addr">
                      <el-input
                        v-model="formData.purchase_person_addr"
                        placeholder="请输入采购人地址:"
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系人："
                      prop="purchase_person_contact_name"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_name"
                        placeholder="请输入采购人联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购人联系方式："
                      prop="purchase_person_contact_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_person_contact_mobile"
                        placeholder="请输入采购人联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构名称：" prop="purchase_agent_name">
                      <el-input
                        v-model="formData.purchase_agent_name"
                        placeholder="请输入采购代理机构名称："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="180px" label="采购代理机构地址：" prop="purchase_agent_addr">
                      <el-input
                        v-model="formData.purchase_agent_addr"
                        placeholder="请输入采购代理机构地址："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系人："
                      prop="purchase_agent_person"
                    >
                      <el-input
                        v-model="formData.purchase_agent_person"
                        placeholder="请输入采购代理机构联系人："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      label-width="180px"
                      label="采购代理机构联系方式："
                      prop="purchase_agent_mobile"
                    >
                      <el-input
                        v-model="formData.purchase_agent_mobile"
                        placeholder="请输入采购代理机构联系方式："
                        clearable
                        :style="{width: '100%'}"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </el-dialog>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30]"
        :page-size="params.limit"
        :current-page.sync="params.offset"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { chengjiao } from "@/api/purchase";
export default {
  data() {
    return {
      formData: {},
      open1: false,
      //页面
      bidlist: [],
      // 分页获取数据参数
      params: {
        limit: 10,
        offset: 1,
        keywords: "",
        // c: null
      },
      total: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      multipleSelection: [],
    };
  },
  created() {
    this.getChengjiao();
  },

  methods: {
    //页面
    shuaxin() {
      this.getChengjiao();
    },
    getChengjiao() {
      // this.params.user_id = sessionStorage.getItem("user_id");
      chengjiao(this.params).then((response) => {
        console.log(response);
        this.bidlist = response.data.rows;
        this.total = response.data.total;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        name: "",
      };
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    details(rows) {
      var bbc = JSON.stringify(rows);
      this.$router.push({ name: "zbxq", query: { params: bbc } });
      // this.open1 = true;
      // this.formData = rows;
    },
    //新增按钮操作
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加档案架";
      this.getChengjiao();
    },
    //修改
    handleUpdate() {
      this.reset();
      this.open = true;
      this.title = "修改档案架";
      this.getChengjiao();
    },
    //提交按钮
    onSubmit() {
      alert("submit!");
      this.open = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.params.limit = val;
      this.getChengjiao();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.params.offset = val;
      this.getChengjiao();
    },
  },
};
</script>

<style scoped>
.body {
  /* width: 87vw;
  height: 84vh;
  overflow: auto; */
}

.table {
  width: 100%;
  margin-top: 2vh;
}

.block {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>
